<template>
  <div class="lin-container">
    <div class="lin-wrap">
      <div class="wrap-label">
        <span class="label">列表</span>
        <div class="operatiion">
          <el-button type="primary" size="small" @click="handleClick('新增')">新增</el-button>
        </div>
      </div>
      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column label="No" type="index" width="60"/>
        <el-table-column prop="name" label="名称"/>
        <el-table-column prop="url" label="缩略图">
          <template #default="scope">
              <el-image
                style="width: 100px; height: 100px"
                :src="scope.row.url"
                :zoom-rate="1.2"
                fit="cover"
                @click="showBigImage(scope.row.url)"
              />
          </template>
        </el-table-column>
        <el-table-column prop="indexSort" label="排序"/>
        <el-table-column prop="address" label="操作">
          <template #default>
            <el-button link type="primary" size="small" @click="handleClick('修改')">修改</el-button>
            <el-button link type="danger" plain size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-image-viewer hide-on-click-modal @close="()=>{showViewer = false}" v-if="showViewer && viewFileList.length>0" :url-list="viewFileList" :initial-index="0"/>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        indexTitle: "Banner",
        indexContent: ""
      },
      dialogTitle: "",
      dialogFormVisible: false,
      formLabelWidth: "140px",
      rules: {
        maxSize: 1,
        minWidth: 100,
        minHeight: 100
      },
      initData: [
        {
          id: "123",
          display:
            "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
          src:
            "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
          imgId: "12381900"
        },
        {
          id: "12d3",
          display:
            "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
          src: "/images/index/Lin_cms_%E5%B0%81%E9%9D%A2.png",
          imgId: "238287"
        },
        {
          id: "hahah",
          display:
            "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
          src: "/images/index/Lin_UI_%E5%B0%81%E9%9D%A2.png",
          imgId: "1232323"
        }
      ],
      tableData: [
        {
          date: "2016-05-03",
          name: "Tom",
          url:
            "https://img0.baidu.com/it/u=3942419239,954908845&fm=253&fmt=auto&app=138&f=JPEG?w=1080&h=323",
          indexSort: 1,
          address: "No. 189, Grove St, Los Angeles"
        },
        {
          date: "2016-05-02",
          name: "Tom",
          url:
            "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
          indexSort: 2,
          address: "No. 189, Grove St, Los Angeles"
        },
        {
          date: "2016-05-04",
          name: "Tom",
          indexSort: 3,
          address: "No. 189, Grove St, Los Angeles"
        }
      ],
      showViewer:false,
      viewFileList:[]
    };
  },
  methods: {
    handleClick(str) {
      this.dialogTitle = str;
      this.$router.push('/addArticle')
    },
    showBigImage(url){
      this.viewFileList = []
      this.showViewer = true
      this.viewFileList.push(url)
    },
    submit(){
      
    }
  }
};
</script>

    
<style scoped lang="scss">
.lin-wrap {
  padding: 40px 0;
  .wrap-label {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    .label {
      font-size: 16px;
    }
  }
}
::v-deep .uploadimage {
  .el-form-item__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    .upload-demo {
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;

      .el-upload {
        margin-right: 10px;
      }
    }
    .demo-image__preview {
      display: flex;
      flex-direction: row;
    }
  }
}
::v-deep .el-dialog__header{
  display: flex;
  .el-dialog__headerbtn{
    top: 0
  }
}
</style>
